<template>
  <el-menu
      mode='vertical'
      class='el-menu-vertical-demo'
      :default-active="$route.path"
      :collapse="isCollapse"
      :unique-opened="true"
      :default-openeds='[$route.path]'
      text-color="#333333"
      active-text-color="red"
      >
      <slider-item v-for="item in itemList" :key="item.path" :item='item' :basePath='item.path' :isCollapse='isCollapse'/>
  </el-menu>
  <div class="menu-head">
    <i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="isCollapse = !isCollapse"></i>
  </div>
</template>
<script lang='ts'>
import { useRouter } from 'vue-router';
import { defineComponent, reactive, ref  } from 'vue';
import SliderItem from '@/components/navBar/sliderItem.vue'
export default defineComponent({
  components: {
    SliderItem
  },
  setup() {
    const router = useRouter() // 所有路由信息
    const routerArr = reactive(router.options.routes) // 获取所有路由信息用于渲染主菜单
    const itemList = routerArr
    const isCollapse = ref<boolean>(false)
    return {
      itemList,
      isCollapse,
    }
  },
});
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  flex: 1;
}
.el-menu--collapse {
  flex: 1;
}
.menu-head {
  flex-shrink: 0;
  text-align: right;
  font-size: 25px;
  padding: 10px;
  cursor: pointer;
  border-right: solid 1px #e6e6e6
}
</style>

